<template>
	<div class="about">
		<el-table :data="tableData" style="width: 100%">
			<el-table-column label="序号" width="80">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="问题" width="680">
				<template slot-scope="scope">
					<span style="margin-left: 10px">{{ scope.row.title }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
		</el-pagination>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '1',
          title: '王小虎上海市普陀区金沙江路',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: '2',
          title: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: '3',
          title: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: '4',
          title: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>